<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>内置的边</title>
  </head>
  <body>
    <div id="mountNode"></div>
    <script src="../build/g6.js"></script>
    <script>
      G6.registerEdge(
        'new-polyline',
        {
          options: {
            style: {
              lineWidth: 5,
              stroke: 'green',
            },
          },
          drawLabel(cfg, group) {
            const labelstyle = this.getLabelStyle(cfg, {}, group);
            const { x, y } = labelstyle;
            cfg.label = 'xxx';
            const label = group.addShape('text', {
              attrs: {
                x,
                y,
                stroke: 'blue',
              },
            });
            console.log('labelStyle', labelstyle, label);
            return label;
          },
        },
        'polyline',
      );

      G6.registerNode(
        'new-circle',
        {
          options: {
            style: {
              lineWidth: 5,
              fill: 'green',
            },
          },
          drawLabel(cfg, group) {
            const labelstyle = this.getLabelStyle(cfg, {}, group);
            const { x, y } = labelstyle;
            const label = group.addShape('text', {
              attrs: {
                x,
                y,
                text: '默认',
                stroke: 'red',
              },
            });
            console.log('labelStyle', labelstyle, label);
            return label;
          },
        },
        'circle',
      );

      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 600,
        defaultNode: {
          size: [40, 40],
        },
        modes: {
          default: ['brush-select', 'drag-node'],
        },
      });

      /*
       * data
       */
      const data = {
        nodes: [
          {
            id: 'node1',
            label: 'node1',
            x: 100,
            y: 100,
            shape: 'new-circle',
          },
          {
            id: 'node4',
            // label: 'node4',
            x: 150,
            y: 300,
            style: {
              opacity: 0,
              fill: '#fff',
              stroke: '#fff',
            },
            // shape: 'rect'
          },
          {
            id: 'node5',
            label: 'node5',
            x: 200,
            y: 100,
            // shape: 'rect'
          },
          {
            id: 'node6',
            // label: 'node6',
            x: 350,
            y: 300,
            style: {
              opacity: 0,
              fill: '#fff',
              stroke: '#fff',
            },
            // shape: 'rect'
          },
          {
            id: 'node7',
            // label: 'node7',
            x: 350,
            y: 200,
            style: {
              fill: '#fff',
              stroke: '#fff',
            },
            // shape: 'rect'
          },
          {
            id: 'node8',
            label: 'node8',
            x: 350,
            y: 450,
            // shape: 'rect'
          },
        ],
        edges: [
          {
            source: 'node1',
            target: 'node4',
            shape: 'new-polyline',
            label: 'edge1-4',
            controlPoints: [{ x: 100, y: 200 }],
            style: {
              radius: 10,
              offset: 20,
            },
          },
          {
            source: 'node4',
            target: 'node5',
            shape: 'new-polyline',
            label: 'edge5-7',
            // style: {
            //   lineWidth: 1.5,
            //   stroke: '#888',
            // }
          },
          {
            source: 'node4',
            target: 'node7',
            shape: 'line',
          },
          {
            source: 'node4',
            target: 'node6',
            shape: 'cubic',
            label: 'cubic',
            style: {
              stroke: '#088',
              lineWidth: 3,
            },
            labelCfg: {
              refY: 10,
              refX: 40,
            },
          },
          // {
          //   source: 'node6',
          //   target: 'node8',
          //   shape: 'arc'
          // },
          // {
          //   source: 'node5',
          //   target: 'node7',
          //   shape: 'quadratic'
          // },
          // {
          //   source: 'node4',
          //   target: 'node8',
          //   shape: 'polyline',
          //   style: {
          //     radius: 10,
          //     offset: 20
          //   }
          // },
        ],
      };

      graph.data(data);
      graph.render();

      // graph.on('edge:click', evt => {
      //   console.log(evt)
      //   const { item } = evt
      //   graph.updateItem(item, {
      //     style: {
      //       lineWidth: 3,
      //       stroke: 'red'
      //     }
      //   })
      //   // const hasState = item.hasState('select')
      //   // if(!hasState) {
      //   //   graph.setItemState(item, 'select', true);
      //   // }
      // })

      // graph.on('edge:mouseenter', evt => {
      //   const { item } = evt;
      //   graph.setItemState(item, 'hover', true);
      // })

      // graph.on('edge:mouseleave', evt => {
      //   const { item } = evt;
      //   const hasState = item.hasState('select')
      //   if(!hasState) {
      //     graph.setItemState(item, 'hover', false);
      //     graph.setItemState(item, 'running', false);
      //   }
      // })

      graph.on('edge:mouseenter', evt => {
        const { item } = evt;
        graph.setItemState(item, 'hover', true);
      });

      graph.on('edge:mouseleave', evt => {
        const { item } = evt;
        graph.setItemState(item, 'hover', false);
      });

      graph.on('edge:click', evt => {
        const { item } = evt;
        graph.setItemState(item, 'select', true);
      });
    </script>
  </body>
</html>
